<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import DeleteUserForm from './Partials/DeleteUserForm.vue';
import UpdatePasswordForm from './Partials/UpdatePasswordForm.vue';
import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm.vue';
import { Head } from '@inertiajs/vue3';

defineProps({
    mustVerifyEmail: {
        type: Boolean,
    },
    status: {
        type: String,
    },
});
</script>

<template>
    <Head title="个人信息" />

    <AuthenticatedLayout>
        <div class="bg-gray-100 min-h-screen">
            <div class="max-w-7xl mx-auto px-8 sm:px-16 lg:px-24 py-20">
                <!-- 页面标题 -->
                <div class="mb-8">
                    <h1 class="text-3xl font-light text-gray-900">个人信息</h1>
                    <p class="mt-2 text-gray-600">管理您的账户信息和设置</p>
                </div>

                <div class="space-y-6">
                    <!-- 个人信息表单 -->
                    <div class="bg-white rounded-2xl p-8 shadow-sm">
                        <UpdateProfileInformationForm
                            :must-verify-email="mustVerifyEmail"
                            :status="status"
                        />
                    </div>

                    <!-- 密码修改 -->
                    <div class="bg-white rounded-2xl p-8 shadow-sm">
                        <UpdatePasswordForm />
                    </div>

                    <!-- 删除账户 -->
                    <div class="bg-white rounded-2xl p-8 shadow-sm">
                        <DeleteUserForm />
                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>
